<template>
  <div id="yilong">
     <Layout>
        <project-header></project-header>
        <div class="container">
        <Breadcrumb>
          <BreadcrumbItem to="/">Home</BreadcrumbItem>
          <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
          <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
      </Breadcrumb>
      <Layout>
        <Row class="sort-bar">
            <Col span="1" push="20">默认</Col>
            <Col span="1" push="20">价格</Col>
            <Col span="1" push="20">时间</Col>
        </Row>
      </Layout>
      <Layout>
            <Sider breakpoint="md" collapsible :collapsed-width="78">
                <Menu active-name="1-1" theme="dark" width="auto">
                    <MenuItem v-for="(price,i) in priceFilter"  :name="'1-'+(i+1)" :key="price.id">
                        <span>{{price.startPrice}} - {{price.endPrice}}</span>
                    </MenuItem>
                    <!-- <MenuItem name="1-2">
                        <Icon type="search"></Icon>
                        <span>Option 2</span>
                    </MenuItem>
                    <MenuItem name="1-3">
                        <Icon type="settings"></Icon>
                        <span>Option 3</span>
                    </MenuItem> -->
                </Menu>
                <div slot="trigger"></div>
            </Sider>
            <Content>
              <Row :gutter="16">
              <Col span="8" v-for="(item,index) in goodsList" :key="item.productId">
                  <div class="goods-box">
                    <div class="product-pic">
                      <a href="###"><img v-lazy="'/static/images/'+item.productImg" alt="img"></a>
                    </div>
                    <div class="img-main">
                      <div class="name">{{ item.productName }}</div>
                      <div class="price">{{ item.productPrice }}</div>
                      <div class="btn-area">
                        <Button type="error" long>加入购物车</Button>
                      </div>
                    </div>
                  </div>
              </Col>
          </Row>
            </Content>
        </Layout>
        </div>
        <project-footer></project-footer>
    </Layout>
    <!-- <router-view/> -->
  </div>
</template>

<script>
import projectHeader from './components/publicComponents/header'
import projectFooter from './components/publicComponents/footer'
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return{
      goodsList:[],
      priceFilter:[
        {
          "id":"1001",
          "startPrice":'0.00',
          "endPrice":"500.00"
        },
        {
          "id":"1002",
          "startPrice":'500.00',
          "endPrice":"1000.00"
        },
        {
          "id":"1003",
          "startPrice":'1000.00',
          "endPrice":"2000.00"
        }
      ]
    }
  },
  mounted:function(){
      axios.get('/api/goods').then((result,res,next)=>{
       console.log(result.data.result);
        var res=result.data.result;
        this.goodsList=res;
      })
  },
  components:{
    projectHeader,
    projectFooter
  },
  methods:{
    
  }
}
</script>

<style lang="stylus">
.goods-box
  border:1px solid #cccccc
  background-color :#fff
.product-pic
  max-width :100%
  max-height :200px
  overflow hidden
  text-align :center
  padding 12px 0
.name
    padding-bottom 12px
.price
    color red 
    padding 12px 0
.img-main
  padding:12px
.ivu-layout-header
  background-color :#fff
#yilong
  font-family:'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing:antialiased
  -moz-osx-font-smoothing:grayscale
  vertical-align:middle
  color:#2c3e50
.container
  width :80%
  margin:0 auto   
.top-bar
  height :-36px
  img
    width:58px
    display:block
.car-ico
  font-size :24px
.ivu-breadcrumb>span:last-child
  color:#b51414 
.ivu-breadcrumb
  padding :12px 0
.sort-bar
  background-color :#fff
  padding :18px 0  
.ivu-layout-sider
  background-color:#fff
.ivu-menu-dark
  background :none
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title
  color:#333
</style>
